<template>
  <el-card class="container-card">
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="$emit('isUpdateShowAttrList', false)"
      >添加属性</el-button
    >
    <el-table
      v-loading="loading"
      :data="attrList"
      border
      class="container-table"
    >
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="属性" prop="attrName" />
      <el-table-column label="属性值">
        <template v-slot="{ row }">
          <el-tag
            class="attr-value-tag"
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            type="success"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-tooltip effect="dark" content="编辑" placement="top-start">
            <el-button
              class="edit-btn"
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="modifyAttr(row)"
            ></el-button>
          </el-tooltip>
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            @onConfirm="delAttr(row.id)"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              slot="reference"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { reqAttrList, reqDeleteAttr } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'attrList',
  data() {
    return {
      attrList: [],
      loading: false
    }
  },
  computed: {
    ...mapState('category', ['category1Id', 'category2Id', 'category3Id'])
  },
  methods: {
    async getAttrList(category3Id) {
      if (!category3Id) return
      this.loading = true
      const { category1Id, category2Id } = this
      const data = await reqAttrList({
        category1Id,
        category2Id,
        category3Id
      })
      this.attrList = data
      this.loading = false
    },

    async delAttr(attrId) {
      await reqDeleteAttr(attrId)
      this.$message.success('删除成功')
      this.getAttrList(this.category3Id)
    },
    modifyAttr(attr) {
      this.$emit('updateAttr', attr)
    }
  },
  watch: {
    category3Id: { handler: 'getAttrList', immediate: true }
  }
}
</script>

<style lang="sass" scoped>
.attr-value-tag
  margin-right:5px
.edit-btn
  margin-right:5px
</style>
